import { Drawer, Button, message, Popconfirm, Image, Input } from "antd";
import React from "react";
import RcViewer from "@hanyk/rc-viewer";
import "./index.scss";
import { positionStyle } from "../ArticleDetailCom/DrawerMultilayer/SettingArticle";
import changeByte from "../../utils/convertUnit";
import copyAction from "../../utils/copyText";
const FileDrawerItem = ({
  visible,
  info,
  closeVisible,
  handlerClickDel = () => {
    message.info("没传参数,呆逼");
  },
}) => {
  return (
    <Drawer
      className="drawer-box"
      title="文件信息"
      extra={<i className="iconfont icon-chahao" onClick={closeVisible}></i>}
      visible={visible}
      onClose={closeVisible}
      closable={false}
      width={640}
    >
      <RcViewer className="info-img">
        <Image
          preview={false}
          src={info?.url}
          className="info-img"
          fallback=""
        />
      </RcViewer>
      <div className="info-div">文件名称:&nbsp;&nbsp;&nbsp;&nbsp;{info.name?.split("flieName/")[1]}</div>
      <div className="info-div">存储路径:&nbsp;&nbsp;&nbsp;&nbsp;{info.name}</div>
      <div className="info-div">
        <span>文件类型:&nbsp;&nbsp;&nbsp;&nbsp;image/{info.fileType}</span>
        <span>文件大小:&nbsp;&nbsp;&nbsp;&nbsp;{changeByte(info.size)}</span>
      </div>
      <div className="info-div">
        <span style={{ width: 75 }}>访问链接:&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <Input.TextArea onClick={() => copyAction(info.url)} value={info.url} autoSize={{ minRows: 1, maxRows: 10 }}></Input.TextArea>
      </div>
      <div className="info-div">
        <span style={{ width: 75 }}></span>
        <Button type="link" onClick={() => copyAction(info.url)}>
          复制
        </Button>
      </div>
      <div style={positionStyle} className="drawer-content">
        <Button onClick={closeVisible}>关闭</Button>
        <Popconfirm
          title="确认删除这个文件？"
          okText="确认"
          cancelText="取消"
          onConfirm={() => {
            handlerClickDel(info.name);
          }}
        >
          <Button danger className="del-btn">
            删除
          </Button>
        </Popconfirm>
      </div>
    </Drawer>
  );
};

export default FileDrawerItem;
